<template>
  <el-select
    v-model="val"
    size="mini"
    clearable
    value-key="id"
    placeholder="请选择"
    @change="handleChange($event,type)"
  >
    <slot />
  </el-select>

</template>

<script>
import { t } from 'element-ui/src/locale'

export default {
  name: 'AttrSelect',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    name: String,
    id: String,
    /**
     * 对象属性
     */
    value: {
      required: true
    },
    /**
     * 属性名
     */
    attrName: {
      type: String,
      required: true
    },
    /**
     * 选择框类型(form/query)
     */
    type: String,
    autocomplete: {
      type: String,
      default: 'off'
    },
    /** @Deprecated in next major version */
    autoComplete: {
      type: String,
      validator(val) {
        process.env.NODE_ENV !== 'production' &&
        console.warn('[Element Warn][Select]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.')
        return true
      }
    },
    automaticDropdown: Boolean,
    size: String,
    disabled: Boolean,
    clearable: Boolean,
    filterable: Boolean,
    allowCreate: Boolean,
    loading: Boolean,
    popperClass: String,
    remote: Boolean,
    loadingText: String,
    noMatchText: String,
    noDataText: String,
    remoteMethod: Function,
    filterMethod: Function,
    multiple: Boolean,
    multipleLimit: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String,
      default() {
        return t('el.select.placeholder')
      }
    },
    defaultFirstOption: Boolean,
    reserveKeyword: Boolean,
    valueKey: {
      type: String,
      default: 'value'
    },
    collapseTags: Boolean,
    popperAppendToBody: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      /**
       * el-select 绑定的option对象
       */
      val: this.value
    }
  },
  computed: {
    attr: {
      get() {
        return this.value
      },
      set(newValue) {
        console.log('set', newValue)
        this.$emit('change', newValue)
      }
    }
  },
  watch: {
    val(newValue, oldValue) {
      const attribute = newValue[this.attrName]
      this.attr = attribute
    },
    value: {
      handler(newValue, oldValue) {
        console.log('old:', oldValue, 'new:', newValue)
        // eslint-disable-next-line no-empty
        if (newValue) {
        } else {
          this.val = {}
        }
      },
      deep: true
    }
  },
  methods: {
    handleChange(event, type) {
      this.$emit('optChange', event, type)
    }
  }
}
</script>

<style scoped>

</style>
